<template>
	<scroll-view scroll-y :scroll-top="scrollTop" @scroll="_scroll" class="_page" :style="{ paddingBottom: notShowClaimOutLine ? 0 : 'calc(144rpx + env(safe-area-inset-bottom))' }">
		<!-- #ifdef APP-PLUS||MP -->
		<uni-nav-bar dark fixed backgroundStyle="#FFFFFF" color="#121317" status-bar>
			<template slot="left">
				<uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
			</template>
			<template>
				<view class="nav_title">查专业报考热度</view>
			</template>
			<!-- #ifdef APP-PLUS||H5 -->
			<template slot="right">
				<view class="_right" @click.stop="_shareOpen">
					<text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
					<!-- <uni-icons type="redo-filled" color="#007AFF" size="20"></uni-icons> -->
					<text class="text">分享</text>
				</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #endif -->
		<view class="_padding" style="background-color: #ffffff; padding-top: 20rpx">
			<mSearch></mSearch>
		</view>

		<!-- 截图区域 -->
		<view id="htmlCanvas">
			<view class="content-box">
				<view class="title">计算机应用技术可报考本科专业热度</view>
				<view class="echarts_box baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<qiun-data-charts
						type="column"
						@complete="(e) => complete(e, 'major', '')"
						tooltipFormat="heat"
						:opts="majorOptionInfo.options"
						:chartData="majorOptionInfo.chartData"
					/>
				</view>
			</view>
			<view class="content-box borderTop">
				<view class="title">可报考本科2023年招生计划</view>
				<view class="echarts_box baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<qiun-data-charts type="column" @complete="(e) => complete(e, 'major', '人')" tooltipFormat="heat" :opts="planInfo.options" :chartData="planInfo.chartData" />
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="bottom_btn" v-if="!notShowClaimOutLine">
			<view class="primary_btn _block">领取考试大纲</view>
		</view>

		<!-- 分享示例 -->
		<uni-popup :is-mask-click="false" ref="share" type="share" safeArea backgroundColor="transparent">
			<uni-popup-share title="分享至" cancelText="取消分享" @select="select"></uni-popup-share>
		</uni-popup>
		<!-- 截图 -->
		<subfunction @share="_shareOpen" :scrollTop="topHeight" @_top="_top"></subfunction>
	</scroll-view>
</template>

<script>
import mSearch from '../components/m-search';
import subfunction from '../components/subfunction.vue';
import memberBenefits from '../components/memberBenefits.vue';
export default {
	components: {
		mSearch,
		subfunction,
		memberBenefits
	},
	data() {
		return {
			scrollTop: 0,
			topHeight: 0,
			majorOptionInfo: {
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					height: 200,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						showTextLength: 4,
						marginTop: 2,
						boundaryGap: 'center',
						rotateLabel: true,
						marginTop: 5
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						showTitle: true,
						data: [
							{
								min: 0,
								axisLineColor: '#EFF0F0',
								position: 'left',
								title: '',
								fontSize: 10,
								fontColor: '#858688',
								tofix: 0
							}
						]
					},
					extra: {
						column: {
							type: 'group',
							width: 16,
							barBorderRadius: [3, 3, 0, 0],
							activeBgColor: '#000000',
							activeBgOpacity: 0,
							linearType: 'opacity',
							customColor: ['#0052D9', '#007AFF'],
							linearOpacity: 0.4,
							activeLinearOpacity: 1
						},
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: true,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF'
						}
					}
				},
				chartData: {
					categories: ['自动化', '计算机科学与技术', '计算机科学与技术', '计算机科学与技术', '计算机科学与技术', '计算机科学与技术'],
					series: [
						{
							name: '关注热度',
							data: [5000, 15600, 500, 1600, 1800, 200]
						}
					]
				}
			},
			planInfo: {
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					height: 200,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						showTextLength: 4,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						marginTop: 5,
						boundaryGap: 'center',
						rotateLabel: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						showTitle: true,
						data: [
							{
								min: 0,
								axisLineColor: '#EFF0F0',
								position: 'left',
								calibration: false,
								title: '',
								fontSize: 10,
								fontColor: '#858688',
								tofix: 0
							}
						]
					},
					extra: {
						column: {
							type: 'group',
							width: 16,
							barBorderRadius: [3, 3, 0, 0],
							activeBgColor: '#000000',
							activeBgOpacity: 0,
							linearType: 'custom',
							customColor: ['#0052D9', '#007AFF'],
							linearOpacity: 0.4,
							activeLinearOpacity: 1
						},
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							unit: '人',
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: true,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF'
						}
					}
				},
				chartData: {
					categories: ['自动化', '计算机科学与技术', '计算机科学与技术', '计算机科学与技术', '计算机科学与技术', '计算机科学与技术'],
					series: [
						{
							name: '招生人数',
							data: [1200, 600, 2, 50, 2]
						}
					]
				}
			}
		};
	},
	methods: {
		_top() {
			this.scrollTop = this.topHeight;
			setTimeout(() => {
				this.scrollTop = 0;
			}, 100);
		},
		_scroll(e) {
			this.topHeight = e.detail.scrollTop;
		},
		_shareOpen() {
			this.$refs.share.open('bottom');
		},
	},
	onLoad(){
		getApp().globalData.isLiscation = true;
	},
};
</script>

<style lang="scss" scoped>
$paddingLR: 40rpx;
._page {
	width: 100vw;
	min-height: 100vh;
	background-color: #f4f5f7;
	padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
}
.content {
	width: 100%;
	background-color: #ffffff;
	padding-top: 52rpx;
	padding-bottom: 52rpx;
	border-radius: 0 0 30rpx 30rpx;
	.search-box {
		margin-bottom: 27rpx;
	}
	.statics-box {
		margin-top: 50rpx;
		width: 100%;
		.title {
			font-size: 39rpx;
			color: #121317;
			font-weight: bold;
		}
		.uls {
			margin-top: 18rpx;
			display: grid;
			grid-gap: 10rpx 30rpx;
			grid-template-areas: '. . .';
			.lis {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 23rpx;
				view {
					flex-shrink: 0;
				}
				.lis-left {
					color: #858688;
				}
				.lis-right {
					color: #121317;
					font-weight: bold;
				}
			}
		}
	}
}
.content-box {
	width: 100vw;
	padding: 63rpx 39rpx 80rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 0 0 30rpx 30rpx;
	.title {
		font-size: 38rpx;
		color: #121317;
		font-weight: bold;
		margin-bottom: 42rpx;
	}
}
.borderTop {
	padding-top: 53rpx;
	border-radius: 30rpx 30rpx 0 0;
	margin-top: 30rpx;
}
</style>
